<template>
  <div class="icon-components">
    <div class="component-container">
      <!-- 搜索栏 -->
      <div class="search-section">
        <el-input
          v-model="searchText"
          placeholder="搜索图标..."
          size="large"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <!-- 分类筛选 -->
        <div class="category-filter">
          <el-radio-group v-model="selectedCategory">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="basic">基础</el-radio-button>
            <el-radio-button label="arrow">箭头</el-radio-button>
            <el-radio-button label="media">媒体</el-radio-button>
            <el-radio-button label="device">设备</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 图标网格 -->
      <div class="icons-grid">
        <div 
          class="icon-item"
          v-for="icon in filteredIcons"
          :key="icon.name"
          @click="copyIconName(icon)"
        >
          <div class="icon-display">
            <el-icon :size="32">
              <component :is="icon.component"/>
            </el-icon>
          </div>
          <div class="icon-name">{{ icon.name }}</div>
          <div class="icon-copy-tip">点击复制</div>
        </div>
      </div>
      
      <!-- 使用说明 -->
      <div class="usage-guide">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><InfoFilled /></el-icon>
              <span>使用说明</span>
            </div>
          </template>
          <div class="guide-content">
            <h4>如何使用图标组件：</h4>
            <ol>
              <li>点击任意图标即可复制图标名称</li>
              <li>在组件中导入图标：<code>import { IconName } from '@element-plus/icons-vue'</code></li>
              <li>在模板中使用：<code>&lt;el-icon&gt;&lt;IconName /&gt;&lt;/el-icon&gt;</code></li>
            </ol>
            
            <h4>示例代码：</h4>
            <pre class="code-example">
&lt;template&gt;
  &lt;el-icon :size="20"&gt;
    &lt;Star /&gt;
  &lt;/el-icon&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { Star } from '@element-plus/icons-vue'
&lt;/script&gt;
            </pre>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Search, Star, Bell, User, Setting, Lock,
  Edit, Delete, Plus, Minus, Upload, Download,
  ArrowLeft, ArrowRight, ArrowUp, ArrowDown,
  View, Picture, Document, Folder, Files,
  Phone, ChatDotRound, Camera, Monitor, Printer,
  InfoFilled, SuccessFilled, WarningFilled, CircleCloseFilled
} from '@element-plus/icons-vue'

const searchText = ref('')
const selectedCategory = ref('all')

// 图标数据
const icons = ref([
  // 基础图标
  { name: 'Star', component: 'Star', category: 'basic' },
  { name: 'Bell', component: 'Bell', category: 'basic' },
  { name: 'User', component: 'User', category: 'basic' },
  { name: 'Setting', component: 'Setting', category: 'basic' },
  { name: 'Lock', component: 'Lock', category: 'basic' },
  { name: 'Edit', component: 'Edit', category: 'basic' },
  { name: 'Delete', component: 'Delete', category: 'basic' },
  { name: 'Plus', component: 'Plus', category: 'basic' },
  { name: 'Minus', component: 'Minus', category: 'basic' },
  { name: 'Upload', component: 'Upload', category: 'basic' },
  { name: 'Download', component: 'Download', category: 'basic' },
  
  // 箭头图标
  { name: 'ArrowLeft', component: 'ArrowLeft', category: 'arrow' },
  { name: 'ArrowRight', component: 'ArrowRight', category: 'arrow' },
  { name: 'ArrowUp', component: 'ArrowUp', category: 'arrow' },
  { name: 'ArrowDown', component: 'ArrowDown', category: 'arrow' },
  
  // 媒体图标
  { name: 'View', component: 'View', category: 'media' },
  { name: 'Picture', component: 'Picture', category: 'media' },
  { name: 'Document', component: 'Document', category: 'media' },
  { name: 'Folder', component: 'Folder', category: 'media' },
  { name: 'Files', component: 'Files', category: 'media' },
  
  // 设备图标
  { name: 'Phone', component: 'Phone', category: 'device' },
  { name: 'ChatDotRound', component: 'ChatDotRound', category: 'device' },
  { name: 'Camera', component: 'Camera', category: 'device' },
  { name: 'Monitor', component: 'Monitor', category: 'device' },
  { name: 'Printer', component: 'Printer', category: 'device' }
])

// 过滤图标
const filteredIcons = computed(() => {
  let result = icons.value

  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    result = result.filter(icon => icon.category === selectedCategory.value)
  }

  // 按搜索文本筛选
  if (searchText.value) {
    result = result.filter(icon =>
      icon.name.toLowerCase().includes(searchText.value.toLowerCase())
    )
  }

  return result
})

// 复制图标名称
const copyIconName = async (icon) => {
  try {
    await navigator.clipboard.writeText(icon.name)
    ElMessage.success(`已复制图标名称: ${icon.name}`)
  } catch (err) {
    ElMessage.error('复制失败')
  }
}
</script>

<style scoped lang="scss">
.icon-components {
  padding: 32px;
  
  .component-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .search-section {
    margin-bottom: 32px;
    
    .el-input {
      max-width: 400px;
      margin-bottom: 16px;
    }
    
    .category-filter {
      :deep(.el-radio-group) {
        .el-radio-button__inner {
          border-radius: 20px;
          margin-right: 8px;
          border: none;
          background: #f5f7fa;
          color: #606266;
          
          &:hover {
            background: #e8f4ff;
            color: #409EFF;
          }
        }
        
        .el-radio-button.is-active .el-radio-button__inner {
          background: linear-gradient(135deg, #409EFF, #36CFC9);
          color: white;
        }
      }
    }
  }
  
  .icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
    
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      background: white;
      border-radius: 12px;
      border: 2px solid #f0f2f5;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #409EFF;
        box-shadow: 0 4px 15px rgba(64, 158, 255, 0.15);
        transform: translateY(-2px);
        
        .icon-display {
          color: #409EFF;
        }
        
        .icon-copy-tip {
          opacity: 1;
        }
      }
      
      .icon-display {
        margin-bottom: 12px;
        color: #606266;
        transition: color 0.3s ease;
      }
      
      .icon-name {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        text-align: center;
        margin-bottom: 4px;
      }
      
      .icon-copy-tip {
        font-size: 12px;
        color: #909399;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
    }
  }
  
  .usage-guide {
    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: #303133;
      
      .el-icon {
        color: #409EFF;
      }
    }
    
    .guide-content {
      h4 {
        color: #303133;
        margin: 0 0 12px 0;
        font-size: 16px;
      }
      
      ol {
        color: #606266;
        margin-bottom: 24px;
        
        li {
          margin-bottom: 8px;
          line-height: 1.6;
          
          code {
            background: #f5f7fa;
            padding: 2px 6px;
            border-radius: 4px;
            color: #e74c3c;
            font-size: 12px;
          }
        }
      }
      
      .code-example {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 16px;
        font-size: 13px;
        line-height: 1.5;
        color: #495057;
        overflow-x: auto;
        margin: 0;
      }
    }
  }
}

@media (max-width: 768px) {
  .icon-components {
    padding: 16px;
    
    .search-section {
      .el-input {
        max-width: 100%;
      }
      
      .category-filter {
        :deep(.el-radio-group) {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
      }
    }
    
    .icons-grid {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 12px;
      
      .icon-item {
        padding: 16px;
      }
    }
  }
}
</style>
